<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <!--coolie-->
    <link href="public/admin/js/zui/css/zui.css" rel="stylesheet" type="text/css" />
    <link href="public/admin/css/admin.css" rel="stylesheet" type="text/css" />
    <script src="public/admin/js/jquery.1.10.2.js" type="text/javascript"></script>
    <script src="public/admin/js/zui/js/zui.js" type="text/javascript"></script>
    <!--coolie-->
    <title>管理后台首页</title>
</head>

<body style="padding: 30px;">
    <h3>文本颜色</h3>
    <div class="example">
        <p class="text-muted"><span>.text-muted</span> | Lorem ipsum dolor sit amet, consectetur.</p>
        <p class="text-primary"><span>.text-primary</span> | Perferendis eveniet ipsa modi nesciunt, vel.</p>
        <p class="text-danger"><span>.text-danger</span> | Molestias maxime perspiciatis saepe unde corporis.</p>
        <p class="text-success"><span>.text-success</span> | Culpa eum modi assumenda, velit vitae.</p>
        <p class="text-warning"><span>.text-warning</span> | Cumque consequuntur modi fugiat debitis dolorum.</p>
        <p class="text-info"><span>.text-info</span> | Minus nisi consectetur dolorum temporibus architecto.
        </p>
        <p class="text-important"><span>.text-important</span> | Tenetur ullam amet illo sint magni!</p>
        <p class="text-special"><span>.text-special</span> | Sapiente voluptates debitis dolor ipsam libero!</p>
    </div>

    <h3>文本背景色</h3>
    <div class="example">
        <p class="hl-default"><span>.hl-default</span> | Lorem ipsum dolor sit amet, consectetur.</p>
        <p class="hl-primary"><span>.hl-primary</span> | Perferendis eveniet ipsa modi nesciunt, vel.</p>
        <p class="hl-danger"><span>.hl-danger</span> | Molestias maxime perspiciatis saepe unde corporis.
        </p>
        <p class="hl-success"><span>.hl-success</span> | Culpa eum modi assumenda, velit vitae.</p>
        <p class="hl-warning"><span>.hl-warning</span> | Cumque consequuntur modi fugiat debitis dolorum.
        </p>
        <p class="hl-info"><span>.hl-info</span> | Minus nisi consectetur dolorum temporibus architecto.
        </p>
        <p class="hl-important"><span>.hl-important</span> | Tenetur ullam amet illo sint magni!</p>
        <p class="hl-special"><span>.hl-special</span> | Sapiente voluptates debitis dolor ipsam libero!
        </p>
    </div>

    <div class="example">
      <p class="bg-default"><span>.bg-default</span> | Lorem ipsum dolor sit amet, consectetur.</p>
      <p class="bg-primary"><span>.bg-primary</span> | Perferendis eveniet ipsa modi nesciunt, vel.</p>
      <p class="bg-danger"><span>.bg-danger</span> | Molestias maxime perspiciatis saepe unde corporis.</p>
      <p class="bg-success"><span>.bg-success</span> | Culpa eum modi assumenda, velit vitae.</p>
      <p class="bg-warning"><span>.bg-warning</span> | Cumque consequuntur modi fugiat debitis dolorum.</p>
      <p class="bg-info"><span>.bg-info</span> | Minus nisi consectetur dolorum temporibus architecto.</p>
      <p class="bg-important"><span>.bg-important</span> | Tenetur ullam amet illo sint magni!</p>
      <p class="bg-special"><span>.bg-special</span> | Sapiente voluptates debitis dolor ipsam libero!</p>
    </div>

    <h3>禁用文本换行 .text-nowrap</h3>
    <h3>文本超出省略 .text-ellipsis</h3>
    <h3>padding 10像素 .ui-padding .ui-padding-t .ui-padding-b .ui-padding-l .ui-padding-r ui-padding-lr</h3>
    <h3>margin 10像素 上同</h3>
    <h3>浮动 .pull-left .pull-right</h3>
</body>

</html>
<script src="/public/admin/coolie.js" data-main="js/main.js" data-config="~/public/admin/coolie-config.js"></script>